<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀职业战队</title>
    <style>
        .table-normal {
            float: left;
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            background: RGBa(0, 0, 0, 0.4);
            filter: progid: DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr='#40000000', endColorstr='#40000000');
        }
        
        .table {
            width: 700px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        img {
            width: 35px;
            height: 35px;
        }
        
        .table-normal th,
        .table-normal td {
            padding: 8px;
            border: 1px solid #ccc;
            text-align: left;
            color: turquoise;
        }
        
        .change {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }
        
        .change>div {
            padding: 20px 20px;
            height: 160px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 30%;
            border-left: 3px solid red;
            border-right: 3px solid blue;
            border-top: 3px solid green;
            border-bottom: 3px dotted yellow;
        }
        
        .add {
            padding: 20px 20px;
            width: 200px;
            float: left;
            position: fixed;
            top: 200px;
            left: 50px;
            color: black;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 30%;
        }
        
        input {
            border-radius: 10px;
        }
        
        .v-menu {
            background-color: #222227;
            position: relative;
            box-sizing: border-box;
            border-bottom: 2px solid #33333b;
        }
        
        .topbground {
            color: #0b0b0e;
            position: fixed;
            top: -5px;
            left: -10px;
            width: 105%;
        }
        
        .v-top {
            height: 60px;
        }
        
        .v-log {
            overflow: hidden;
            float: left;
        }
        
        .v-log .v-menu-logo1 {
            height: 60px;
            width: 70px;
            margin: 0px 0 0 25px;
        }
        
        .v-log img {
            float: left;
            border-style: none;
        }
        
        .v-log .v-menu-logo2 {
            height: 30px;
            width: 150px;
            margin: 15px 0 0 10px;
        }
        
        .v-menu-lists {
            position: absolute;
            width: 100%;
            text-align: center;
        }
        
        .v-menu-lists li {
            display: inline-block;
            color: #a38d64;
            margin: 0 20px;
            padding: 0 10px;
            font-size: 16px;
            line-height: 30px;
            cursor: pointer;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        .v-menu-lists li a {
            text-decoration: none;
            color: #a38d64;
        }
    </style>
</head>

<body background="img/bj.png" style="background-repeat:no-repeat;background-attachment:fixed;background-size:100% 100%; ">

    <div class="v-top v-menu topbground">
        <div class="v-log">
            <img src="img/1.png" class="v-menu-logo1">
            <img src="img/2.png" class="v-menu-logo2">
        </div>
        <div class="v-menu-lists">
            <ul>
                <li><a href="">首页</a> </li>
            </ul>
        </div>

    </div>
    </div>

    <div name="add" class="add">
        <input type="text" class="a1" placeholder="请输入战队名" size="23px">
        <input type="text" class="a2" placeholder="请输入战队全称" size="23px">
        <input type="text" class="a3" placeholder="请输入队标" size="23px">
        <input type="text" class="a4" placeholder="请输入比赛场次" size="23px">
        <input type="text" class="a5" placeholder="请输入胜场" size="23px">
        <input type="text" class="a6" placeholder="请输入胜率" size="23px">
        <br>
        <input type="button" value="添加" class="btn">
    </div>


    <div class="change" name="change">
        <div>
            <input type="text" class="b1" placeholder="请输入战队名" size="20px"><br>
            <input type="text" class="b2" placeholder="请输入战队全称" size="20px"><br>
            <input type="text" class="b3" placeholder="请输入队标" size="20px"><br>
            <input type="text" class="b4" placeholder="请输入比赛场次" size="20px"><br>
            <input type="text" class="b5" placeholder="请输入胜场" size="20px"><br>
            <input type="text" class="b6" placeholder="请输入胜率" size="20px"><br><button class="c">修改</button>
            <button class="q">取消</button>
        </div>
    </div>


    <div class="table">
        <table class="table-normal" id="outBoxTab">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>战队名</td>
                    <td>战队全称</td>
                    <td>队标</td>
                    <td>比赛场次</td>
                    <td>胜场</td>
                    <td>胜率</td>
                    <td>了解更多</td>
                    <td>编辑</td>
                    <td>删除</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>


    <script>
        const arr = [{
                id: 1,
                zdm: 'AG',
                zdqc: '成都AG超玩会',
                db: '<img src = "img/ag-big.jpg">',
                bscc: 76,
                sc: 37,
                sl: 49,

            }, {
                id: 2,
                zdm: 'Hero久竞',
                zdqc: '南京Hero久竞',
                db: '<img src="img/Hero-big.jpg">',
                bscc: 63,
                sc: 36,
                sl: 57,
            }, {
                id: 3,
                zdm: 'eStarPro',
                zdqc: 'eStar电子竞技俱乐部',
                db: '<img src = "img/eStar-big.jpg" >',
                bscc: 78,
                sc: 42,
                sl: 54,

            }, {
                id: 4,
                zdm: '重庆狼队',
                zdqc: '重庆狼队',
                db: '<img src="img/lang-big.jpg">',
                bscc: 75,
                sc: 52,
                sl: 69,
            },

            {
                id: 5,
                zdm: 'WE',
                zdqc: '西安曲江WE电子竞技俱乐部王者荣耀分部',
                db: '<img src = "img/WE-big.jpg" > ',
                bscc: 47,
                sc: 22,
                sl: 47,

            }, {
                id: 6,
                zdm: 'KSG',
                zdqc: '苏州KSG电子竞技俱乐部',
                db: '<img src = "img/ksg-big.jpg" >',
                bscc: 69,
                sc: 35,
                sl: 51,

            }, {
                id: 7,
                zdm: 'XYG',
                zdqc: 'XYG电子竞技俱乐部',
                db: '<img src = "img/xyg-big.jpg" >',
                bscc: 40,
                sc: 16,
                sl: 40,

            }, {
                id: 8,
                zdm: 'LGD大鹅',
                zdqc: '杭州LGD大鹅王者荣耀战队',
                db: '<img src = "img/lgd-big.jpg" >',
                bscc: 89,
                sc: 48,
                sl: 54,

            }, {
                id: 9,
                zdm: 'DYG',
                zdqc: '深圳DYG电子竞技俱乐部',
                db: '<img src = "img/DYG-big.jpg" >',
                bscc: 38,
                sc: 15,
                sl: 40,

            }, {
                id: 10,
                zdm: 'EDG.M',
                zdqc: '上海EDG.M电子竞技俱乐部',
                db: '<img src = "img/edgm-big.jpg" >',
                bscc: 43,
                sc: 22,
                sl: 51,

            }, {
                id: 11,
                zdm: 'MTG',
                zdqc: 'Mighty Tiger Gaming',
                db: '<img src = "img/mtg-big.jpg" >',
                bscc: 61,
                sc: 28,
                sl: 46,

            },
        ];

        // 调用函数 生成 动态渲染 生成标签对象
        setPage();

        //localStorage本地存储
        localStorage.setItem("arr", JSON.stringify(arr));



        // 新增操作:
        // 获取标签对象 新增标签对象
        const oAddDiv = document.querySelector('[name="add"]');
        const oBtnAdd = oAddDiv.querySelector('.btn');
        const oAddzdm = oAddDiv.querySelector('.a1');
        const oAddzdqc = oAddDiv.querySelector('.a2');
        const oAdddb = oAddDiv.querySelector('.a3');
        const oAddbscc = oAddDiv.querySelector('.a4');
        const oAddsc = oAddDiv.querySelector('.a5');
        const oAddsl = oAddDiv.querySelector('.a6');

        // 修改操作
        // 获取标签对象 修改标签对象
        const oChangeDiv = document.querySelector('[name="change"]');
        const oBtnChange = document.querySelector('.c');
        const oBtnCancel = document.querySelector('.q');

        const oChangezdm = oChangeDiv.querySelector('.b1');
        const oChangezdqc = oChangeDiv.querySelector('.b2');
        const oChangedb = oChangeDiv.querySelector('.b3');
        const oChangebscc = oChangeDiv.querySelector('.b4');
        const oChangesc = oChangeDiv.querySelector('.b5');
        const oChangesl = oChangeDiv.querySelector('.b6');


        // 定义变量 存储 索引下标
        let index = 0;

        // 添加点击事件
        oBtnAdd.addEventListener('click', function() {
            // 获取数据
            var zdm = oAddzdm.value.trim();
            var zdqc = oAddzdqc.value.trim();
            var db = oAdddb.value.trim();
            var bscc = oAddbscc.value.trim();
            var sc = oAddsc.value.trim();
            var sl = oAddsl.value.trim();
            if (!zdm || !zdqc || !db || !bscc || !sc || !sl) {
                alert('请填写完整表单！');
                return;
            } else {
                alert("确认添加吗？")
                    // 向 数组 新增 对象单元
                    // id 是最后有一个单元的 id值 +1
                if (arr.length != 0) {
                    arr.push({
                        id: arr[arr.length - 1].id + 1,
                        zdm: zdm,
                        zdqc: zdqc,
                        db: db,
                        bscc: bscc,
                        sc: sc,
                        sl: sl
                    })
                }
                if (arr.length == 0) {
                    arr.push({
                        id: 1,
                        zdm: zdm,
                        zdqc: zdqc,
                        db: db,
                        bscc: bscc,
                        sc: sc,
                        sl: sl
                    })
                }

                // 再次调用函数 动态渲染生成页面
                localStorage.setItem("arr", JSON.stringify(arr));
                setPage();
                // 添加后把添加的输入框数据清除 
                oAddzdm.value = ''
                oAddzdqc.value = ''
                oAdddb.value = ''
                oAddbscc.value = ''
                oAddsc.value = ''
                oAddsl.value = ''
            }
        })



        // 删除操作 事件委托
        // 修改操作 事件委托
        var oTbody = document.querySelector('tbody');
        oTbody.addEventListener('click', function(e) {
            // 处理事件对象兼容
            e = e || window.event
                // 处理事件对象目标信息兼容
            var target = e.target || e.srcElement
                // 通过 e.target 的 name属性 判断 如果是del是删除按钮
            if (e.target.getAttribute('name') === 'del') {
                // 执行删除程序
                // 删除数组中 和 对应的删除按钮 匹配的数组中的数据
                // 获取 删除对象单元的索引下标 也就是 标签中 index属性的属性值
                // 获取的属性值 都是字符串类型 需要转化为数值类型
                var num = e.target.getAttribute('index') - 0;

                // 用 index的属性值 作为 索引下标 从数组中删除一个对象
                arr.splice(num, 1);

                // 再次调用函数 动态渲染生成页面
                // 再次动态渲染生成的页面 内容是全新的页面内容
                localStorage.setItem("arr", JSON.stringify(arr));
                setPage();

                // 通过 e.target 的 name属性 判断 如果是change是修改按钮
            } else if (e.target.getAttribute('name') === 'change') {
                // 让 修改div显示 
                // 变量储存点击标签对应的数组的索引下标
                oChangeDiv.style.display = 'flex';
                // 变量 存储 点击标签index属性属性值
                index = e.target.getAttribute('index') - 0;
            }
        })


        // 修改div中的取消按钮
        // 点击时 让 修改div隐藏
        oBtnCancel.addEventListener('click', function() {
            oChangeDiv.style.display = 'none';
        })

        // 修改div中的修改按钮
        // 获取数据
        // 修改 索引下标对应的数组单元中,存储对象的数据
        // 根据新的数组动态渲染生成页面
        // 让修改div隐藏
        oBtnChange.addEventListener('click', function() {

            // 获取数据
            // input 直接获取数据
            // select 获取索引下标 从数组中获取对应的数据
            // input>radio  input>checkbox 判断 checked为true 再获取数据
            let zdm = oChangezdm.value;
            let zdqc = oChangezdqc.value;
            let db = oChangedb.value;
            let bscc = oChangebscc.value;
            let sc = oChangesc.value;
            let sl = oChangesl.value;
            if (!zdm || !zdqc || !db || !bscc || !sc || !sl) {
                alert('请填写完整表单！');
                return;
            }

            // 修改数组中对应索引下标的标签对象
            // 也就是 给 索引下标对应的单元 重新存储一个对象
            // arr[index] = {id:arr[index].id,name:name,age:age,sex:sex,addr:city};

            // 一个一个属性的修改数据
            arr[index].zdm = zdm;
            arr[index].zdqc = zdqc;
            arr[index].db = db;
            arr[index].bscc = bscc;
            arr[index].sc = sc;
            arr[index].sl = sl;

            // 根据新的数组动态渲染生成新的页面内容
            localStorage.setItem("arr", JSON.stringify(arr));
            setPage();

            // 让修改div隐藏
            oChangeDiv.style.display = 'none';
        })


        // 动态渲染生成页面的函数
        function setPage() {
            // 定义字符串 存储 生成的标签内容
            var str = '';

            // 循环遍历 数组 每一个数组单元存储数据 生成一个对应的 tr>td
            // item 就是 存储数据的对象
            // key 存储 对象的索引下标
            arr.forEach(function(item, key) {
                str += `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.zdm}</td>
                        <td>${item.zdqc}</td>
                        <td>${item.db}</td>
                        <td>${item.bscc}</td>
                        <td>${item.sc}</td>
                        <td>${item.sl}</td>
                        <td><button name="xq" index="${key}">详情</button></td>
                        <td><button name="change" index="${key}">编辑</button></td>
                        <td><button name="del" index="${key}">删除</button></td>
                        
                    </tr>
                `;
            })

            // 将字符串写入到标签对象中
            var oTbody = document.querySelector('tbody');
            oTbody.innerHTML = str;
        }
    </script>
</body>

</html>